import React from 'react';
import { Descriptions, Modal } from 'antd';


export default function DescriptionModal({ visible, changeVisible, dataSource }) {
  const dataDescription = Object.keys(dataSource).map(
    (key) => (
      <Descriptions.Item label={key} span={3} key={key}>
        {dataSource[key]}
      </Descriptions.Item>
    ),
  );

  return (
    <Modal
      visible={visible}
      width={800}
      title="详情"
      onCancel={() => changeVisible(false)}
      footer={null}
      destroyOnClose
    >
      <Descriptions bordered size="middle">
        {dataDescription}
      </Descriptions>
    </Modal>
  );
}
